import echarts from 'echarts'
import config from '@/config'

echarts.registerTheme(config.echartsthemeName, {
  color: config.chartTheme,
  backgroundColor: '#081832',
  textStyle: {},
  title: {
    textStyle: {
      color: '#ffffff'
    },
    subtextStyle: {
      color: '#ffffff'
    }
  },
  line: {
    itemStyle: {
      normal: {
        borderWidth: 1
      }
    },
    lineStyle: {
      normal: {
        width: 2
      }
    },
    symbolSize: 4,
    symbol: 'emptyCircle',
    smooth: false
  },
  radar: {
    itemStyle: {
      normal: {
        borderWidth: 1
      }
    },
    lineStyle: {
      normal: {
        width: 2
      }
    },
    symbolSize: 4,
    symbol: 'emptyCircle',
    smooth: false
  },
  bar: {
    itemStyle: {
      normal: {
        barBorderWidth: 0,
        barBorderColor: '#eeeeee'
      },
      emphasis: {
        barBorderWidth: 0,
        barBorderColor: '#eeeeee'
      }
    }
  },
  pie: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  scatter: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  boxplot: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  parallel: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  sankey: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  funnel: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  gauge: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      },
      emphasis: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    }
  },
  candlestick: {
    itemStyle: {
      normal: {
        color: '#00da3c',
        color0: '#ec0000',
        borderColor: '#008F28',
        borderColor0: '#8A0000',
        borderWidth: 1
      }
    }
  },
  graph: {
    itemStyle: {
      normal: {
        borderWidth: 0,
        borderColor: '#eeeeee'
      }
    },
    lineStyle: {
      normal: {
        width: 1,
        color: '#aaaaaa'
      }
    },
    symbolSize: 4,
    symbol: 'emptyCircle',
    smooth: false,
    color: [
      '#0035f9',
      '#f36f8a',
      '#ffff43',
      '#25f3e6',
      '#d12159',
      '#749f83',
      '#ca8622',
      '#bda29a',
      '#6e7074',
      '#546570',
      '#c4ccd3'
    ],
    label: {
      normal: {
        textStyle: {
          color: '#ffffff'
        }
      }
    }
  },
  map: {
    itemStyle: {
      normal: {
        areaColor: '#eee',
        borderColor: '#444',
        borderWidth: 0.5
      },
      emphasis: {
        areaColor: 'rgba(255,215,0,0.8)',
        borderColor: '#444',
        borderWidth: 1
      }
    },
    label: {
      normal: {
        textStyle: {
          color: '#000'
        }
      },
      emphasis: {
        textStyle: {
          color: 'rgb(100,0,0)'
        }
      }
    }
  },
  geo: {
    itemStyle: {
      normal: {
        areaColor: '#eee',
        borderColor: '#444',
        borderWidth: 0.5
      },
      emphasis: {
        areaColor: 'rgba(255,215,0,0.8)',
        borderColor: '#444',
        borderWidth: 1
      }
    },
    label: {
      normal: {
        textStyle: {
          color: '#000'
        }
      },
      emphasis: {
        textStyle: {
          color: 'rgb(100,0,0)'
        }
      }
    }
  },
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#2c3459']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  valueAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#2c3459']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  logAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#333'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#2c3459']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  timeAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#2c3459'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#2c3459']
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: '#ffffff'
      }
    }
  },
  legend: {
    textStyle: {
      color: '#ffffff'
    }
  },
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: '#ffffff',
        width: 1
      },
      crossStyle: {
        color: '#ffffff',
        width: 1
      }
    }
  },
  timeline: {
    lineStyle: {
      color: '#293c55',
      width: 1
    },
    itemStyle: {
      normal: {
        color: '#293c55',
        borderWidth: 1
      },
      emphasis: {
        color: '#a9334c'
      }
    },
    controlStyle: {
      normal: {
        color: '#293c55',
        borderColor: '#293c55',
        borderWidth: 0.5
      },
      emphasis: {
        color: '#293c55',
        borderColor: '#293c55',
        borderWidth: 0.5
      }
    },
    checkpointStyle: {
      color: '#e43c59',
      borderColor: 'rgba(194,53,49,0.5)'
    },
    label: {
      normal: {
        textStyle: {
          color: '#ffffff'
        }
      },
      emphasis: {
        textStyle: {
          color: '#ffffff'
        }
      }
    }
  },
  visualMap: {
    color: ['#003aff', '#f36f8a', '#ffff49', '#25f3e6']
  },
  dataZoom: {
    backgroundColor: '#003aff',
    dataBackgroundColor: '#081832',
    fillerColor: '#081832',
    handleColor: '#a7b7cc',
    handleSize: '150%',
    textStyle: {
      color: '#ffffff'
    }
  },
  markPoint: {
    label: {
      normal: {
        textStyle: {
          color: '#ffffff'
        }
      },
      emphasis: {
        textStyle: {
          color: '#ffffff'
        }
      }
    }
  }
})
